<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>站点管理</title>
	<link href="/static/lib/PearAdmin/component/pear/css/pear.css" rel="stylesheet">
	<link href="/css/sitesmanager.css" rel="stylesheet">
</head>
<body class="pear-container">
	<!-- 查询框 -->
	<div class="layui-card">
		<div class="layui-card-body">
			<form id="searForm" class="layui-form" action="javascript:void(0);">
				<div class="layui-form-item">
					<div class="layui-form-item layui-inline">
						<label class="layui-form-label">站点名称</label>
						<div class="layui-input-inline">
							<input type="text" name="siteName" placeholder="" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item layui-inline">
						<label class="layui-form-label">站点标示</label>
						<div class="layui-input-inline">
							<input type="text" name="siteSign" placeholder="" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item layui-inline">
						<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="site-query">
							<i class="layui-icon layui-icon-search"></i>查询
						</button>
						<button type="reset" class="pear-btn pear-btn-md">
							<i class="layui-icon layui-icon-refresh"></i>重置
						</button>
					</div>
				</div>
			</form>
		</div>
	</div>
	
	<!-- 数据表格 -->
	<div class="layui-card">
		<div class="layui-card-body">
			<table id="site-table" lay-filter="site-table"></table>
		</div>
	</div>
	
	<!-- 数据表格工具栏 -->
	<script type="text/html" id="site-toolbar">
		<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
			<i class="layui-icon layui-icon-add-1"></i>新增
		</button>
		<button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
			<i class="layui-icon layui-icon-delete"></i>删除
		</button>
	</script>
	
	<!-- 数据表格工具条 -->
	<script type="text/html" id="site-bar">
		<button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></button>
		<button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i></button>
	</script>

	<script src="/static/lib/PearAdmin/component/layui/layui.js"></script>
	<script src="/static/lib/PearAdmin/component/pear/pear.js"></script>
	<script>
		layui.use([ 'form', 'table', 'popup','jquery','common'], function() {
			let form = layui.form;
			let table = layui.table;
			let $ = layui.$;//使用layui内置的jQuery
			let common = layui.common;
			
			//数据表格的列
			let cols = [
	            [
	                {type:'checkbox'},
	                {field:'id', hide:true},
	                {title: '站点名称', field: 'siteName', align:'center', width:200},
	                {title: '站点标示', field: 'siteSign', align:'center'},
	                {title: '站点域名', field: 'siteUrl', align:'center'},
	                {title: '操作', toolbar: '#site-bar', align:'center', width:195}
	            ]
	        ]
			
			//渲染数据表格
			table.render({
	            elem: '#site-table',
	            url: '/site/getSites',
	            page: true ,
	            cols: cols ,
	            skin: 'line',
	            toolbar: '#site-toolbar',
	            defaultToolbar: [{
					title: '刷新',
	                layEvent: 'refresh',
	                icon: 'layui-icon-refresh',
	            }, 'filter', 'print', 'exports']
	        });
			
			//查询数据
			form.on('submit(site-query)', function(data){
	            table.reload('site-table',{
	            	where: {
	            		siteName: $("input[name='siteName']").val(),
	            		siteSign: $("input[name='siteSign']").val()}
	            	}
	           	)
	            return false;
	        });

	        /*
	         * 监听工具栏事件
	         */
	        table.on('toolbar(site-table)', function(obj) {
				if (obj.event === 'add') {
					window.add();
				} else if (obj.event === 'refresh') {
					window.refresh();
				} else if (obj.event === 'batchRemove') {
					window.batchRemove(obj);
				}
			});

			//工具栏新增事件
			window.add = function() {
				layer.open({
					type: 2,
					title: '新增',
					shade: 0.1,
					area: [common.isModile()?'100%':'800px', common.isModile()?'100%':'600px'],
					content: '/site/enterSiteAdd',
					end: function(){ //弹窗关闭后重新加载数据
						table.reload('site-table',{})
					}
				});
			}

			//工具栏刷新事件
			window.refresh = function(param) {
				table.reload('site-table');
			}

			//工具栏删除事件
			window.batchRemove = function(obj) {
				let checkIds = common.checkField(obj,'id');
				if (checkIds === "") {
					layer.msg("未选中数据", {
						icon: 3,
						time: 1000
					});
					return false;
				}

				layer.confirm('确定要删除这些数据吗？', {
					icon: 3,
					title: '提示'
				}, function(index) {
					layer.close(index);
					let loading = layer.load();
					$.ajax({
						url: "/site/deleteSite/" + checkIds,
						dataType: 'json',
						type: 'delete',
						success: function(result) {
							layer.close(loading);
							if ("1"==result.state) {
								layer.msg(result.msg, {
									icon: 1,
									time: 1000
								}, function() {
									table.reload('site-table');
								});
							} else {
								layer.msg(result.msg, {
									icon: 2,
									time: 1000
								});
							}
						}
					})
				});
			}

			/*
			 * 监听工具条事件
			 */
			table.on('tool(site-table)', function(obj) {
				if (obj.event === 'remove') {
					window.remove(obj);
				} else if (obj.event === 'edit') {
					window.edit(obj);
				} else if (obj.event === 'reset') {
					window.reset(obj);
				}
			});

			//工具条编辑事件
			window.edit = function(obj){
				layer.open({
					type: 2,
					title: '编辑',
					shade: 0.1,
					area: [common.isModile()?'100%':'800px', common.isModile()?'100%':'600px'],
					content: '/site/enterSiteEdit/' + obj.data['id'],
					end: function(){ //弹窗关闭后重新加载数据
						table.reload('site-table',{})
					}
				});
			}

			//工具条删除事件
			window.remove = function(obj) {
				layer.confirm('确定要删除该数据', {
					icon: 3,
					title: '提示'
				}, function(index) {
					layer.close(index);
					let loading = layer.load();
					$.ajax({
						url: "/site/deleteSite/" + obj.data['id'],
						dataType: 'json',
						type: 'delete',
						success: function(result) {
							layer.close(loading);
							if ('1'==result.state) {
								layer.msg(result.msg, {
									icon: 1,
									time: 1000
								}, function() {
									obj.del();
								});
							} else {
								layer.msg(result.msg, {
									icon: 2,
									time: 1000
								});
							}
						}
					})
				});
			}

		});
	</script>
</body>
</html>
